<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>注册</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />

		<link rel="stylesheet" href="AmazeUI-2.4.2/assets/css/amazeui.min.css" />
		<link href="css/dlstyle.css" rel="stylesheet" type="text/css">
		<script src="AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>

		<!-- 自己引入 -->
		<script src="js/plugins/vue/dist/vue.global.js"></script>
		<script src="js/plugins/axios/dist/axios.js"></script>
		<script src="js/commons.js"></script>

	</head>

	<body id="app">

		<div class="login-boxtitle">
			<a href="home/demo.html"><img alt="" src="images/logobig.png" /></a>
		</div>

		<div class="res-banner">
			<div class="res-main">
				<div class="login-banner-bg"><span></span><img src="images/big.jpg" /></div>
				<div class="login-box">

						<div class="am-tabs" id="doc-my-tabs">
							<ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
								<!--<li class="am-active"><a href="">邮箱注册</a></li>-->
								<li><a href="">手机号注册</a></li>
							</ul>

							<div class="am-tabs-bd">
								<!--<div class="am-tab-panel am-active">
									<form method="post">
										
							   <div class="user-email">
										<label for="email"><i class="am-icon-envelope-o"></i></label>
										<input type="email" name="" id="email" placeholder="请输入邮箱账号">
                 </div>										
                 <div class="user-pass">
								    <label for="password"><i class="am-icon-lock"></i></label>
								    <input type="password" name="" id="password" placeholder="设置密码">
                 </div>										
                 <div class="user-pass">
								    <label for="passwordRepeat"><i class="am-icon-lock"></i></label>
								    <input type="password" name="" id="passwordRepeat" placeholder="确认密码">
                 </div>	
                 
                 </form>

								 <div class="login-links">
										<label for="reader-me">
											<input id="reader-me" type="checkbox"> 点击表示您同意商城《服务协议》
										</label>
							  	</div>
										<div class="am-cf">
											<input type="submit" name="" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl">
										</div>

								</div>-->

								<div class="am-tab-panel">
									<form method="post">
                 <div class="user-phone">
								    <label for="phone"><i class="am-icon-mobile-phone am-icon-md"></i></label>
								    <input type="tel" name="" id="phone" v-model="form.phone" placeholder="请输入手机号">
                 </div>																			
										<!--<div class="verification">
											<label for="code"><i class="am-icon-code-fork"></i></label>
											<input type="tel" name="" id="code" placeholder="请输入验证码">
											<a class="btn" href="javascript:void(0);" onclick="sendMobileCode();" id="sendMobileCode">
												<span id="dyMobileButton">获取</span></a>
										</div>-->
									<div style="margin-bottom: 5px">
									<input style="width: 180px" type="text" id="verifyCode" v-model="form.verifyCode"  placeholder="输入验证码">
									<canvas ref="canvas" width="120" height="40" @click="draw" style="vertical-align:top;cursor: pointer"></canvas>
									</div>
										<div class="user-pass">
								    <label for="password"><i class="am-icon-lock"></i></label>
								    <input type="password" name="" id="password" v-model="form.password"  placeholder="设置密码">
                 </div>										
                 <div class="user-pass">
								    <label for="passwordRepeat"><i class="am-icon-lock"></i></label>
								    <input type="password" name="" id="passwordRepeat" v-model="form.repass" placeholder="确认密码">
                 </div>	
									</form>
								 <div class="login-links">
										<label for="reader-me">
											<input id="reader-me" type="checkbox"> 点击表示您同意商城《服务协议》
										</label>
							  	</div>
										<div class="am-cf">
											<input type="submit" name="" value="注册" @click="handleReg" class="am-btn am-btn-primary am-btn-sm am-fl">
										</div>
								
									<hr>
								</div>

								<script>
									$(function() {
									    $('#doc-my-tabs').tabs();
									  })
								</script>

							</div>
						</div>

				</div>
			</div>
			
					<div class="footer ">
						<div class="footer-hd ">
							<p>
								<a href="# ">恒望科技</a>
								<b>|</b>
								<a href="# ">商城首页</a>
								<b>|</b>
								<a href="# ">支付宝</a>
								<b>|</b>
								<a href="# ">物流</a>
							</p>
						</div>
						<div class="footer-bd ">
							<p>
								<a href="# ">关于恒望</a>
								<a href="# ">合作伙伴</a>
								<a href="# ">联系我们</a>
								<a href="# ">网站地图</a>
								<em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
							</p>
						</div>
					</div>
		</div>

		<script>

			Vue.createApp({
				data(){
					return {
						form: {
							phone: '',
							password: '',
							repass: ''
						},
						numArr: []
					}
				},
				methods: {
					 verify() {
						var codeNum = this.numArr.join("") //生成的验证码
						console.log(codeNum);
						var inputValue = this.form.verifyCode //输入的验证码
						var reg = /^[a-zA-Z0-9]{4}$/;
						if (reg.test(inputValue)) {
							if (inputValue.toLowerCase() == codeNum.toLowerCase()) {
								alert("验证码成功！");
								return true;
							} else {
								alert("验证码错误！");
								return false;
							}
							console.log(inputValue.toLowerCase())
							console.log(codeNum.toLowerCase())

						} else {
							alert("验证码格式错误")
							return false;
						}
					},
					//**********发送用户注册的请求**************
					handleReg(){
						const result = this.verify();
						console.log('----验证结果-----',result);
						if (result){
							axios.post("/user/phoneReg",this.form)
									.then(res=>{
										if (res.data.code == 200){
											//注册成功跳转登录页面
											window.location.href = "login.html";
										}else{
											alert(res.data.msg);
										}
									}).catch(error=>{
										alert(error.message);
									})
						}
					},
					init(){
						var canvas = this.$refs.canvas;
						this.ctx = canvas.getContext('2d');
						console.log(this.ctx);
						this.draw();
						console.log('-----numArr-----',this.numArr);
						canvas.onclick = function () {
							this.ctx.clearRect(0, 0, 120, 30);
							this.draw();
						}
					},
					randColor(min, max) {
						var r = Math.floor(Math.random() * (max - min + 1) + min); //170+[0,80)
						var g = Math.floor(Math.random() * (max - min + 1) + min);
						var b = Math.floor(Math.random() * (max - min + 1) + min);
						return 'rgb(' + r + ',' + g + ',' + b + ')';
					},
					randNum(min, max) {
						var num = Math.floor(Math.random() * (max - min + 1) + min);
						return num;
					},
					draw() {
					 	this.numArr = []
						/*绘制一个矩形  颜色随机*/
						this.ctx.fillStyle = this.randColor(170, 250);
						this.ctx.fillRect(0, 0, 120, 50);
						var data = 'qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM1234567890';

						for (var i = 0; i <= 90; i += 30) {
							var c = data[this.randNum(0, data.length - 1)]; //index 随机数 ===>>>[0,data.length-1]
							this.numArr.push(c) //生成的四个随机数存数组
							this.ctx.fillStyle = this.randColor(60, 160);
							this.ctx.font = this.randNum(15, 40) + 'px SimHei';
							this.ctx.fillText(c, i + this.randNum(0, 15), this.randNum(15, 30));
						}
						/*绘制干扰线*/
						for (var i = 0; i < 10; i++) {
							this.ctx.beginPath();
							this.ctx.moveTo(this.randNum(0, 120), this.randNum(0, 120));
							this.ctx.lineTo(this.randNum(0, 120), this.randNum(0, 120));
							this.ctx.strokeStyle = this.randColor(60, 160);
							this.ctx.stroke();
						}

					},
				},
				mounted(){
					this.init();
				}
			}).mount("#app")
		</script>
	</body>

</html>